/* =====================================================
   SPEAKUP AI
   PROGRESS.CSS
   PART 1
===================================================== */

/* ===========================
   MAIN PAGE
=========================== */

.main{
    flex:1;
    padding:40px;
    overflow-y:auto;
    background:#f5f7fb;
}

/* ===========================
   HEADER
=========================== */

.progress-header{
    margin-bottom:40px;
}

.badge{
    display:inline-block;
    padding:8px 18px;
    border-radius:999px;
    background:#eef2ff;
    color:#4f46e5;
    font-weight:600;
    font-size:14px;
    margin-bottom:18px;
}

.progress-header h1{
    font-size:42px;
    font-weight:800;
    color:#111827;
    margin-bottom:12px;
}

.progress-header p{
    max-width:700px;
    color:#6b7280;
    font-size:17px;
    line-height:1.7;
}

/* ===========================
   OVERALL STATS
=========================== */

.stats-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:24px;

    margin-bottom:40px;

}

.stat-card{

    background:#ffffff;

    border-radius:20px;

    padding:28px;

    text-align:center;

    box-shadow:0 10px 25px rgba(0,0,0,.06);

    transition:.3s;

}

.stat-card:hover{

    transform:translateY(-6px);

}

.stat-card i{

    font-size:34px;

    color:#4f46e5;

    margin-bottom:18px;

}

.stat-card h2{

    font-size:34px;

    color:#111827;

    margin-bottom:8px;

}

.stat-card span{

    color:#6b7280;

    font-size:15px;

}

/* ===========================
   OVERVIEW GRID
=========================== */

.overview-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:30px;

    margin-bottom:40px;

}

.progress-card{

    background:#ffffff;

    border-radius:24px;

    padding:30px;

    box-shadow:0 10px 25px rgba(0,0,0,.06);

}

.card-header{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:18px;

}

.card-header i{

    color:#4f46e5;

    font-size:24px;

}

.card-header h2{

    color:#111827;

    font-size:24px;

    font-weight:700;

}

.progress-card p{

    color:#6b7280;

    line-height:1.6;

}

/* ===========================
   CHART PLACEHOLDER
=========================== */

.chart-placeholder{

    margin-top:28px;

    border:2px dashed #c7d2fe;

    border-radius:18px;

    background:#f8faff;

    padding:70px 20px;

    text-align:center;

}

.chart-placeholder i{

    font-size:60px;

    color:#6366f1;

    margin-bottom:18px;

}

.chart-placeholder h3{

    color:#111827;

    margin-bottom:10px;

}

.chart-placeholder p{

    color:#6b7280;

}

/* ===========================
   SKILLS
=========================== */

.skill-row{

    display:grid;

    grid-template-columns:140px 1fr 60px;

    align-items:center;

    gap:18px;

    margin:22px 0;

}

.skill-row span{

    font-weight:600;

    color:#374151;

}

.skill-bar{

    width:100%;

    height:12px;

    background:#e5e7eb;

    border-radius:999px;

    overflow:hidden;

}

.skill-fill{

    height:100%;

    border-radius:999px;

    background:linear-gradient(90deg,#6366f1,#8b5cf6);

}

.eye{

    width:93%;

}

.confidence{

    width:91%;

}

.voice{

    width:96%;

}

.body{

    width:89%;

}

.pace{

    width:87%;

}

.story{

    width:94%;

}

.skill-row strong{

    text-align:right;

    color:#111827;

}

/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:1100px){

    .stats-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .overview-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .main{

        padding:25px;

    }

    .progress-header h1{

        font-size:34px;

    }

    .skill-row{

        grid-template-columns:1fr;

        gap:10px;

    }

    .skill-row strong{

        text-align:left;

    }

}

@media(max-width:500px){

    .stats-grid{

        grid-template-columns:1fr;

    }

    .progress-card{

        padding:22px;

    }

}
/* =====================================================
   SPEAKUP AI
   PROGRESS.CSS
   PART 2
===================================================== */


/* ===========================
   PERSONAL GOALS
=========================== */

.goals-card{

    background:#ffffff;

    border-radius:24px;

    padding:30px;

    margin-bottom:35px;

    box-shadow:0 10px 25px rgba(0,0,0,.06);

}

.goal-list{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-top:25px;

}

.goal-item{

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px;

    border-radius:16px;

    background:#f8fafc;

    transition:.3s;

    cursor:pointer;

}

.goal-item:hover{

    background:#eef2ff;

}

.goal-item input{

    width:20px;

    height:20px;

    accent-color:#4f46e5;

}

.goal-item span{

    font-size:16px;

    color:#374151;

    font-weight:500;

}



/* ===========================
   COACH CENTER
=========================== */

.coach-center{

    background:#ffffff;

    border-radius:24px;

    padding:30px;

    margin-bottom:35px;

    box-shadow:0 10px 25px rgba(0,0,0,.06);

}

.coach-center p{

    margin-top:10px;

    color:#6b7280;

}

.coach-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

    margin-top:30px;

}

.coach-card{

    border:2px solid #e5e7eb;

    border-radius:18px;

    padding:30px 20px;

    text-align:center;

    transition:.3s;

    background:#fafafa;

}

.coach-card:hover{

    transform:translateY(-6px);

    border-color:#6366f1;

}

.coach-card i{

    font-size:42px;

    color:#4f46e5;

    margin-bottom:15px;

}

.coach-card h3{

    color:#111827;

    margin-bottom:8px;

}

.coach-card p{

    color:#6b7280;

    font-size:15px;

    margin-bottom:15px;

}

.connected{

    display:inline-block;

    padding:8px 16px;

    border-radius:999px;

    background:#dcfce7;

    color:#15803d;

    font-size:14px;

    font-weight:600;

}

.add-coach{

    cursor:pointer;

    border-style:dashed;

}



/* ===========================
   SEND TO COACH
=========================== */

.share-card{

    background:#ffffff;

    border-radius:24px;

    padding:30px;

    margin-bottom:35px;

    box-shadow:0 10px 25px rgba(0,0,0,.06);

}

.share-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

    margin:25px 0;

}

.form-group{

    display:flex;

    flex-direction:column;

}

.form-group label{

    margin-bottom:10px;

    font-weight:600;

    color:#374151;

}

.form-group select{

    padding:14px;

    border:1px solid #d1d5db;

    border-radius:12px;

    font-size:15px;

    outline:none;

    transition:.3s;

}

.form-group select:focus{

    border-color:#6366f1;

}

.primary-btn{

    background:#4f46e5;

    color:#ffffff;

    border:none;

    border-radius:14px;

    padding:16px 28px;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.primary-btn:hover{

    background:#4338ca;

    transform:translateY(-2px);

}



/* ===========================
   COACH FEEDBACK
=========================== */

.feedback-card{

    background:#ffffff;

    border-radius:24px;

    padding:30px;

    margin-bottom:35px;

    box-shadow:0 10px 25px rgba(0,0,0,.06);

}

.feedback-item{

    margin-top:22px;

    padding:22px;

    border-left:5px solid #6366f1;

    border-radius:16px;

    background:#f8fafc;

}

.feedback-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:12px;

}

.feedback-top h3{

    color:#111827;

}

.feedback-top span{

    font-weight:700;

    color:#4f46e5;

}

.feedback-item p{

    color:#4b5563;

    line-height:1.7;

}



/* ===========================
   ACHIEVEMENTS
=========================== */

.achievements-card{

    background:#ffffff;

    border-radius:24px;

    padding:30px;

    box-shadow:0 10px 25px rgba(0,0,0,.06);

}

.achievement-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    margin-top:25px;

}

.achievement{

    text-align:center;

    padding:28px;

    background:#f8fafc;

    border-radius:18px;

    transition:.3s;

    font-size:42px;

}

.achievement:hover{

    transform:translateY(-6px);

    background:#eef2ff;

}

.achievement h3{

    margin-top:16px;

    font-size:17px;

    color:#111827;

}



/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:1000px){

    .coach-grid{

        grid-template-columns:1fr;

    }

    .share-grid{

        grid-template-columns:1fr;

    }

    .achievement-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:650px){

    .achievement-grid{

        grid-template-columns:1fr;

    }

    .feedback-top{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

    }

}